<template>
  <view>
    <van-cell-group>
      <van-field
        :value="formData.nickName"
        placeholder="请输入用户昵称"
        label="用户昵称"
        :border="false"
        required
        input-align="right"
        @change="onChange"
      />
      <van-field
        :value="formData.studentNumber"
        placeholder="请输入用户学号"
        label="学号"
        :border="false"
        disabled
        input-align="right"
        @change="onChangeNumber"
      />
    </van-cell-group>
    <view class="belong-org">所属班级 </view>
    <van-tree-select
      :items="treeData"
      :main-active-index="mainActiveIndex"
      :active-id="formData.deptId"
      @clickNav="onClickNav"
      @clickItem="onClickItem"
    />
    <van-button
      class="comment-btn"
      type="default"
      size="large"
      round
      color="#409eff"
      @click="handleConfirm"
      >保存</van-button
    >
  </view>
</template>

<script>
import {
  GetRoot,
  GetNodeById,
  GetUserInfo,
  UpdateUserInfo,
} from "@/api/course/basic.js";
export default {
  data() {
    return {
      secondId: "",
      mainActiveIndex: 0,
      treeData: [],
      formData: {
        userId: "",
        nickName: "",
        studentNumber: "",
        deptId: "",
      },
    };
  },
  methods: {
    onChange(e) {
      console.log(e);
      this.formData.nickName = e.detail || "";
    },
    onChangeNumber(e) {
      console.log(e);
      this.formData.studentNumber = e.detail || "";
    },
    resetList(list) {
      list.forEach((item) => {
        item.id = item.deptId;
        item.text = item.deptName;
      });
    },
    onClickNav(e) {
      this.mainActiveIndex = e.detail.index;
    },
    onClickItem(e) {
      console.log(e.detail);
      this.formData.deptId = e.detail.id;
    },
    async getChildrenData(item) {
      const res = await GetNodeById(item.id);
      if (res.code === 200) {
        this.resetList(res.data);
        item.children = res.data || [];
      }
    },
    async getTreeData() {
      const res = await GetRoot();
      if (res.code === 200) {
        const secondRes = await GetNodeById(res.data.deptId);
        if (secondRes.code === 200) {
          this.resetList(secondRes.data);
          secondRes.data.forEach((item, index) => {
            if (this.secondId === item.deptId) {
              this.mainActiveIndex = index;
            }
            this.getChildrenData(item);
          });
          this.treeData = secondRes.data;
        }
      }
    },
    async getUserInfo() {
      const userInfo = uni.getStorageSync("userInfo");
      const res = await GetUserInfo(userInfo.userId);
      if (res.code === 200) {
        console.log(res.data);
        this.secondId = (res.data.dept || {}).parentId;
        this.formData.nickName = res.data.nickName;
        this.formData.userId = res.data.userId;
        this.formData.studentNumber = res.data.studentNumber;
        this.formData.deptId = res.data.deptId;
      }
    },
    async handleConfirm() {
      if (!this.formData.nickName) {
        uni.showToast({
          title: "请输入用户昵称",
          icon: "none",
        });
      }
      if (!this.formData.deptId) {
        uni.showToast({
          title: "请输入用户组织",
          icon: "none",
        });
      }
      const res = await UpdateUserInfo(this.formData);
      if (res.code === 200) {
        uni.showToast({
          title: "修改成功",
          icon: "success",
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 500);
      }
    },
  },
  onShow() {
    this.getUserInfo();
    this.getTreeData();
  },
};
</script>

<style scoped>
.belong-org {
  font-size: 28rpx;
  padding: 32rpx;
  color: #646566;
}
.comment-btn {
  position: fixed;
  bottom: 0;
  margin-left: 40rpx;
  bottom: 30rpx;
  width: calc(100vw - 80rpx);
}
</style>